<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<base href="http://edu.bluej.cn/public/uploads/index/"><br><title>html+css测试</title>
	</head>
	<body>
		<!--
			
			共32题，（除标注分数外的各3分）
			
			1、如何制作电子邮件链接？( C )
				A、<a href="xxx@yyy">
				B、<mail href="xxx@yyy">
				C、<a href="mailto:xxx@yyy">
				D、<mail>xxx@yyy</mail>
			
			2、如何在新窗口打开链接？( B )
				A、<a href="url" new>
				B、<a href="url" target="_blank">
				C、<a href="url" target="new">
			
			3、(不定项)bootstrap中关于h标签，<h1>h1. Bootstrap heading <small>Secondary text</small></h1>
			以下说法正确的是 ( AD )
				 A、<h1>最大
				 B、<h6>最大
				 C、<small>用法错误
				 D、<small>表示副标题
			
            4、<!DOCTYPE HTML>是什么？
            
            5、标签分类，分为哪几种？
                    单标签 br hr img input
                    双标签
			
			5、行内元素有哪些？块级元素有哪些？ 空(void)元素有那些？
                    a span img input 
                    div p h1 li
                    i br hr 
			
			6、Label的作用是什么？是怎么用的？
                    label 标签是用来定义表单和控制间的关系，当用户选择该标签时，
                    浏览器会自动将焦点转移到和标签相关的表单控件上。

                    第一种：通过 label 的 for 属性和表单控件的 ID 进行关联；
                    第二种：通过 label 标签将文字与表单控件包裹起来，实现隐式绑定；
			
            7、简述一下你对HTML语义化的理解？
                    HTML语义化：就是页面去掉样式或者加载失败的时候，能够让页面呈现出清晰的结构。
                    例如，header、footer、nav、menu等等，单单从字面上理解，就知道标签的含义。在写页面时，
                    我们可以直接引用这些标签，对于浏览器来说可以识别，对于开发人员来说也很容易明白。这就是HTML语义化。
                    
                    HTML语义化的好处：
                    （1）为了在没有CSS的情况下，页面能够呈现出很好地内容结构、代码结构；
                    （2）用户体验：例如title和alt用于解释名词；
                    （3）有利于页面的搜索引擎优化（SEO），利于被搜索引擎检录；
                    （4）方便其他设备解析（屏幕阅读器、盲人阅读器）以意义的方式来渲染网页；
                    （5）便于项目的维护和开发，使HTML的代码更佳具有可读性。

            8、路径有哪几种? 分别描述它们。
                    相对路径和绝对路径。
                    绝对路径是指文件在硬盘上真正存在的路径，或者以 http 开头的网络地址，都是一个绝对路径；
                    相对路径就是指相对于自己的目标文件位置。

            9、css引入方式有哪几种？
                    行内、页内、页外

            10、css优先级是哪些？

            11、说说display:none; 和visibility:hidden、opacity:0 的区别
                    （1）元素的显示方式，元素直接不渲染，页面不存在该元素的任何结构，会导致页面的回流重绘；
                    （2）元素的可见性，元素不可见，在页面会渲染该元素的盒子模型，交互行为会被禁用，子元素可以单独显示；
                    （3）元素的透明度，元素完全透明，交互行为和结构都不会受到影响，子元素无法单独显示。

            12、css定位有哪几种？
                    相对定位、绝对定位、粘性定位（sticky）、固定定位。

            13、bfc是什么？

            14、什么是媒体查询？
                    通过查询当前设备是属于哪种媒体设备，让网页在不同的设备下显示不同的样式。
                    只写一套代码，可以在多端适用。

            15、什么是盒子模型，请详细描述。
                    在网页中，一个元素占有控件的大小由好几个部分构成，其中包括元素的内容（content）、元素的内边距（padding）
                    元素的外边距（margin）、元素的边框（border）这几个部分。有的部分可以显示相应的内容，而有的部分只用来
                    分隔相邻的区域；这四个部分构成了css中元素的盒子模型。

            16、什么是rem em 两者的区别。
                    rem 相对于根标签字体的大小；
                    em 首先相对于本身字体大小，如果没有定义，则按照父元素的字体大小。
            
            17、vw vh是什么？
                    vw 代表屏幕视口宽度的大小分成100份后，每一份的大小，也就是说 100vw 等于一个视口的宽度；
                    vh 代表屏幕视口高度的大小分成100份，每一份的大小，100vh 等于一个视口的高度。

            18、什么是自适应布局，什么响应式布局？ 各自原理是什么？（4分）
                    自适应布局是根据设备的不同而进行适应；
                    响应式布局是根据屏幕大小的尺寸来进行响应。

            19、css样式如何排查，调试？ 请说出你的排查css样式问题的过程。（4分）
                    打开F12 控制台，查看对应的元素上是否有相应的CSS代码，如果存在，那就查看属性是否写错；
                    如果不存在，要么是选择器的路径有问题或者类名写错，要么就是预编译工具没有编译成功。

            20、代码规范习惯，说说你觉得代码良好的习惯是那些。
                    注释、取名规范

            21、git操作命令，写出你能记得的命令。
                    git add .
                    git commit -m "备注"
                    git pull
                    git push

                    git branch 查看本地分支
                    git checkout 切换分支
                    git branch xxxx 新建分支
                    git checkout -b 分支名   新建并切换分支
                    git branch -d xxx 删除分支

                    git push origin 分支名  
			
			22、对于li这个节点，下列哪个CSS选择器的优先级最高？
                    行内                1000
                    ID                   0100
                    class 属性          0010
			
				A、li#app           0101
				B、li.cnt              0011
				C、li.cnt:hover     0021
				D、#app.cnt         0110

			23、如何居中div？(至少用3种方法，写出代码)（4分）
                    margin: 0 auto;

                    绝对定位：
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%,-50%);
                    ---------
                    position: absolute;
                    top: 0;
                    bottom: 0;
                    left: 0;
                    right: 0;
                    margin: auto;

                    弹性布局
                    display: flex;
                    justify-content: center;
                    align-items: center;
			
			24、display有哪些值？说明他们的作用。
                    inline、inline-block、block、flex、none、table、table-cell、
			
			25、position的值relative和absolute定位的参考点是？
                    绝对定位按照最近一个position不为static的一个祖辈元素的内边距+内容区域作为参考区域；
                    相对定位按照元素本身作为参考点。
			
			26、用代码纯CSS画出一个三角形。
			
			27、display:inline-block 什么时候会显示间隙？怎么解决？ 
                    (1) 元素换行时，会产生间隙，这是因为父盒子的 font-size 影响，导致回车会作为一个空格去展示。
                    (2) 当行内元素并行排列时，他们的底部会产生白色的间隙。这是受到 vertical-align: baseline 的影响

                    （1）给父元素设置 font-size: 0;
                    （2）如果子元素较多，可以给子元素设置 vertical-align: bottom；如果子元素唯一，可以设置 display: block 来消除 vertical-align 的影响。
			
			28、为什么要初始化CSS样式？
			
			29、请解释一下为什么需要清除浮动？清除浮动的方式有哪几种？
                    首先对于父盒子来说，子元素的浮动会脱离文档流，导致高度塌陷（如果子元素的高度会影响父盒子）；
                    对于兄弟元素来说，子元素的浮动，会导致根据它结构来排列的兄弟元素产生布局上的改变。
                    清除浮动，并不是清除掉浮动的样式，而是清除掉浮动带来的影响或者问题。

                    clear: both;
                    对父盒子产生一个新的BFC，比如 overflow: hidden、给父盒子 float、display: inline-block
			
			30、::before 和 :after中双冒号和单冒号 有什么区别？解释一下这2个伪元素的作用。
                    :hover :active :link :visited :focus 伪类
                    ::before  ::after 伪元素

			
			31、设置元素浮动后，该元素的display值是多少？
                    display: block; 而不是 float。
			
			32、怎么让Chrome支持小于12px 的文字？（4分）
                    通过 transform: scale(0.5);
		-->
	</body>
</html>

